<script setup lang="ts">
import useHomeStore from "@/pinia/modules/homeStore/homeStore.ts";
import { storeToRefs } from "pinia";
import type { Ref } from "vue";
import type { Banner } from "@/types/homeTypes/homeTypes.ts";

const homeStore = useHomeStore();

const { bannerList }: { bannerList: Ref<Banner[]> } = storeToRefs(homeStore);


/*调用函数获取轮播图*/
homeStore.fetchBannerList();

</script>

<template>
   <div class="banner">
      <Carousel :banner-list="bannerList" :auto-play="true" :interval="3000"></Carousel>
   </div>
</template>

<style scoped lang="less">
.banner {
   width: 1240px;
   height: 500px;
   position: absolute;
   left: 0;
   top: 0;
   z-index: 98;

   .carousel {
      :deep(.carousel-btn.prev) {
         left: 270px;
      }

      :deep(.carousel-indicator) {
         padding-left: 250px;
      }
   }
}
</style>
